@model HDLogCenter.Infrastructure.Models.LogIndexViewModel
@{
    ViewData["Title"] = "日志查询";
}

<div class="layui-card">
    <div class="layui-card-header">
        <h2>日志查询</h2>
    </div>
    <div class="layui-card-body">
        <!-- 搜索表单 -->
        <form class="layui-form layui-form-pane" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <select name="code" lay-search>
                            <option value="">请选择项目</option>
                            @foreach (var project in Model.Projects)
                            {
                                <option value="@project.AppCode" selected="@(Model.Code == project.AppCode)">@project.AppName</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">日志级别</label>
                    <div class="layui-input-inline">
                        <select name="level">
                            <option value="">全部级别</option>
                            <option value="1" selected="@(Model.Level == 1)">Error (1)</option>
                            <option value="2" selected="@(Model.Level == 2)">Warning (2)</option>
                            <option value="3" selected="@(Model.Level == 3)">Information (3)</option>
                            <option value="4" selected="@(Model.Level == 4)">Debug (4)</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="startDate" placeholder="请选择开始日期" class="layui-input" value="@(Model.StartTime?.ToString("yyyy-MM-dd HH:mm:ss"))">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endDate" placeholder="请选择结束日期" class="layui-input" value="@(Model.EndTime?.ToString("yyyy-MM-dd HH:mm:ss"))">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                
                <div class="layui-inline">
                    <label class="layui-form-label">错误信息</label>
                    <div class="layui-input-inline">
                        <input type="text" name="message" placeholder="请输入错误信息关键词" class="layui-input" value="@Model.Message">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="searchSubmit">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <!-- 统计信息 -->
        <div class="layui-row layui-col-space15" style="margin-top: 15px;">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <h3>@Model.TotalCount</h3>
                        <p>总日志数</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <h3>@Model.Projects.Count()</h3>
                        <p>项目数量</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <h3>0</h3>
                        <p>错误日志数</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日志表格 -->
        <table id="logTable" lay-filter="logTable"></table>
    </div>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="refresh">
            <i class="layui-icon layui-icon-refresh"></i> 刷新
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="alertConfig">
            <i class="layui-icon layui-icon-set"></i> 警告配置
        </button>
    </div>
</script>

<!-- 操作列 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
</script>

<!-- 日志级别标签 -->
<script type="text/html" id="logLevelTpl">
    {{# if(d.level === 1){ }}
        <span class="layui-badge layui-bg-red">Error (1)</span>
    {{# } else if(d.level === 2){ }}
        <span class="layui-badge layui-bg-orange">Warning (2)</span>
    {{# } else if(d.level === 3){ }}
        <span class="layui-badge layui-bg-blue">Information (3)</span>
    {{# } else if(d.level === 4){ }}
        <span class="layui-badge layui-bg-gray">Debug (4)</span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">Unknown ({{d.level}})</span>
    {{# } }}
</script>

@section Scripts {
    <script>
        layui.use(['table', 'form', 'laydate', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            
            // 日期选择器
            laydate.render({
                elem: '#startDate',
                type: 'datetime'
            });
            laydate.render({
                elem: '#endDate',
                type: 'datetime'
            });
            
            // 表格渲染
            table.render({
                elem: '#logTable',
                url: '/LogManager/GetLogs',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'idStr', title: 'ID', width: 100, sort: true},
                    {field: 'serverCode', title: '服务器代码', width: 120},
                    {field: 'code', title: '项目代码', width: 120},
                    {field: 'level', title: '日志级别', width: 100, templet: '#logLevelTpl'},
                    {field: 'message', title: '消息内容', width: 500, templet: function(d){
                        return d.message ? (d.message.length > 50 ? d.message.substring(0, 50) + '...' : d.message) : '';
                    }},
                    {field: 'serverIP', title: '服务器IP', width: 120},
                    {field: 'httpMethod', title: 'HTTP方法', width: 80},
                    {field: 'url', title: 'URL', width: 150, templet: function(d){
                        return d.url ? (d.url.length > 20 ? d.url.substring(0, 20) + '...' : d.url) : '';
                    }},
                    {field: 'createTime', title: '创建时间', width: 180, sort: true, templet: function(d){
                        if (!d.createTime) return '';
                        // 如果是秒级时间戳
                        var timestamp = d.createTime * 1000;
                        return new Date(timestamp).toLocaleString();
                    }},
                    {title: '操作', toolbar: '#barDemo', width: 150, fixed: 'right'}
                ]],
                page: true,
                limit: 50,
                limits: [20, 50, 100, 200],
                height: 'full-300'
            });
            
            // 搜索表单提交
            form.on('submit(searchSubmit)', function(data){
                // 转换日期格式
                var whereData = {};
                if(data.field.startTime){
                    whereData.startTime = data.field.startTime;
                }
                if(data.field.endTime){
                    whereData.endTime = data.field.endTime;
                }
                if(data.field.code){
                    whereData.code = data.field.code;
                }
                if(data.field.serverCode){
                    whereData.serverCode = data.field.serverCode;
                }
                if(data.field.level){
                    whereData.level = parseInt(data.field.level);
                }
                if(data.field.message){
                    whereData.message = data.field.message;
                }
                
                table.reload('logTable', {
                    where: whereData,
                    page: {curr: 1}
                });
                return false;
            });
            
            // 表格工具栏事件
            table.on('toolbar(logTable)', function(obj){
                if(obj.event === 'refresh'){
                    table.reload('logTable');
                } else if(obj.event === 'alertConfig'){
                    // 跳转到警告配置管理页面
                    window.location.href = '/AlertConfig';
                }
            });
            
            // 行工具事件
            table.on('tool(logTable)', function(obj){
                var data = obj.data;
                console.log(data.id);
                console.log(data.idStr);
                if(obj.event === 'detail'){
                    layer.open({
                        type: 2,
                        title: '日志详情',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['80%', '90%'],
                        content: '/LogManager/Details/' + data.idStr
                    });
                }
            });
            
            // 双击行进入详情
            table.on('rowDouble(logTable)', function(obj){
                var data = obj.data;
                layer.open({
                    type: 2,
                    title: '日志详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['80%', '90%'],
                    content: '/LogManager/Details/' + data.idStr
                });
            });
            
        });
    </script>
}
